<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">

    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css"
          rel="stylesheet"/>

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

    <!--  PAGINATION plugin -->
    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
    <script type="text/javascript" src="js/commons.js"></script>

    <script type="text/javascript">

        $(function () {


            //当容器加载完成，对容器调用工具函数 日期工具类
            $(".mydate").datetimepicker({
                language: 'zh-CN',//语言
                format: 'yyyy-mm-dd',//日期格式
                minView: 'month',//日期选择器上最小能选择的日期的视图
                initialDate: new Date(),// 日历的初始化显示日期，此处默认初始化当前系统时间
                autoclose: true,//选择日期之后，是否自动关闭日历
                todayBtn: true,//是否显示当前日期的按钮
                clearBtn: true,//是否显示清空按钮
            });

            //刚进入网页就加载线索数据
            getClueForPageByCondition(1, 2);

            //刚进入网页的时候就查询线索来源 和 线索状态
            $.ajax({
                url: "workbench/clue/getClue.do?typeCode=source",
                type: "get",
                success: function (data) {
                    //拼接字符串
                    var htmlStr = "<option value=''>-----请选择-----</option>";
                    $.each(data, function (index, item) {
                        htmlStr += "<option value=\"" + item.id + "\">" + item.value + "</option>";
                    });
                    $("#create-source").html(htmlStr);
                }
            });
            $.ajax({
                url: "workbench/clue/getClue.do?typeCode=clueState",
                type: "get",
                success: function (data) {
                    //拼接字符串
                    var htmlStr = "<option value=''>-----请选择-----</option>";
                    $.each(data, function (index, item) {
                        htmlStr += "<option value=\"" + item.id + "\">" + item.value + "</option>";
                    });
                    $("#create-state").html(htmlStr);
                }
            })

            //给查询按钮绑定单击事件
            $("#clue-query").on("click", function () {
                // alert($("page_demo").bs_pagination("getOption","rowsPerPage"))
                // getClueForPageByCondition(1,$("demo_pag2").bs_pagination("getOption","rowsPerPage"));
                getClueForPageByCondition(1, 2);
            });

            //给重置按钮绑定单击事件
            $("#clue-reset").on("click", function () {
                $("#clue-company").val("");
                $("#clue-fullName").val("");
                $("#clue-mphone").val("");
                $("#clue-phone").val("");
                $("#clue-source").val("");
                $("#clue-clueState").val("");
                $("#clue-owner").val("");
                getClueForPageByCondition(1, 2);
            });

            //给创建按钮绑定单击事件
            $("#clue-create").on("click", function () {
                //打开模态窗口
                $("#createClueModal").modal("show");

                //获取线索状态，线索来源，称谓，所有者列表
                $.ajax({
                    url: "workbench/clue/getClue.do?typeCode=source",
                    type: "get",
                    success: function (data) {
                        //拼接字符串
                        let htmlStr = "<option value=''>-----请选择-----</option>";
                        $.each(data, function (index, item) {
                            htmlStr += "<option value=\"" + item.id + "\">" + item.value + "</option>";
                        });
                        $("#clue-source").html(htmlStr);
                    }
                });
                $.ajax({
                    url: "workbench/clue/getClue.do?typeCode=appellation",
                    type: "get",
                    success: function (data) {
                        //拼接字符串
                        let htmlStr = "<option value=''>-----请选择-----</option>";
                        $.each(data, function (index, item) {
                            htmlStr += "<option value=\"" + item.id + "\">" + item.value + "</option>";
                        });
                        $("#create-appellation").html(htmlStr);
                    }
                });
                $.ajax({
                    url: "workbench/clue/getClue.do?typeCode=clueState",
                    type: "get",
                    success: function (data) {
                        //拼接字符串
                        let htmlStr = "<option value=''>-----请选择-----</option>";
                        $.each(data, function (index, item) {
                            htmlStr += "<option value=\"" + item.id + "\">" + item.value + "</option>";
                        });
                        $("#clue-clueState").html(htmlStr);
                    }
                })
                $.ajax({
                    url: "settings/qx/user/getAllUserList.do",
                    type: "get",
                    success: function (data) {
                        //拼接字符串
                        let htmlStr = "<option value=''>-----请选择-----</option>";
                        $.each(data, function (index, item) {
                            htmlStr += "<option value=\"" + item.id + "\">" + item.name + "</option>";
                        });
                        $("#create-clueOwner").html(htmlStr);
                    }
                })

            });

            //给保存按钮绑定单击事件
            $("#saveCreateClueBtn").on("click", function () {
                //获取数据
                let owner = $("#create-clueOwner").val();
                let appellation = $("#create-appellation").val();
                let fullName = $("#create-fullName").val();
                let company = $("#create-company").val();
                let job = $("#create-job").val();
                let email = $("#create-email").val();
                let phone = $("#create-phone").val();
                let website = $("#create-website").val();
                let mphone = $("#create-mphone").val();
                let state = $("#create-state").val();
                let source = $("#create-source").val();
                let description = $("#create-description").val();
                let contactSummary = $("#create-contactSummary").val();
                let nextContactTime = $("#create-nextContactTime").val();
                let address = $("#create-address").val();


                //判断必填数据是否为空
                if ('' === owner) {
                    alert("所有者不能为空!");
                    return;
                }
                if ('' === company) {
                    alert("公司不能为空!");
                    return;
                }
                if ('' === fullName) {
                    alert("姓名不能为空!");
                    return;
                }
                if ('' === state) {
                    alert("线索状态不能为空");
                    return;
                }
                if ('' === source) {
                    alert("线索来源不能为空");
                    return;
                }


                //发送ajax请求
                $.ajax({
                    url: "workbench/clue/saveClue.do",
                    type: "post",
                    data: {
                        owner: owner,
                        appellation: appellation,
                        fullName: fullName,
                        company: company,
                        job: job,
                        email: email,
                        phone: phone,
                        website: website,
                        mphone: mphone,
                        state: state,
                        source: source,
                        description: description,
                        contactSummary: contactSummary,
                        nextContactTime: nextContactTime,
                        address: address
                    },
                    success: function (data) {
                        if (data.code === 1) {
                            alert("新增成功!");
                            //刷新数据
                            getClueForPageByCondition(1, $("#page_demo").bs_pagination("getOption", "rowsPerPage"));
                            //关闭模态窗口
                            $("#createClueModal").modal("hide");
                            //清空模态窗口数据
                            $("#create-clue-form")[0].reset();
                        } else {
                            alert(data.message);
                        }
                    }
                })
            });

            //给修改按钮绑定点击事件按
            $("#clue-edit").on("click", function () {
                //判断选中的是否多于一个
                let checkedList = $("#tBody input:checked");
                if (checkedList.size() !== 1) {
                    alert("一次只能修改一条记录");
                    return;
                }

                //获取修改的id
                let id = checkedList.val();

                //获取线索状态，线索来源，称谓，所有者列表
                $.ajax({
                    url: "workbench/clue/getClue.do?typeCode=source",
                    type: "get",
                    success: function (data) {
                        //拼接字符串
                        let htmlStr = "<option value=''>-----请选择-----</option>";
                        $.each(data, function (index, item) {
                            htmlStr += "<option value=\"" + item.id + "\">" + item.value + "</option>";
                        });
                        $("#edit-source").html(htmlStr);
                    }
                });
                $.ajax({
                    url: "workbench/clue/getClue.do?typeCode=appellation",
                    type: "get",
                    success: function (data) {
                        //拼接字符串
                        let htmlStr = "<option value=''>-----请选择-----</option>";
                        $.each(data, function (index, item) {
                            htmlStr += "<option value=\"" + item.id + "\">" + item.value + "</option>";
                        });
                        $("#edit-call").html(htmlStr);
                    }
                });
                $.ajax({
                    url: "workbench/clue/getClue.do?typeCode=clueState",
                    type: "get",
                    success: function (data) {
                        //拼接字符串
                        let htmlStr = "<option value=''>-----请选择-----</option>";
                        $.each(data, function (index, item) {
                            htmlStr += "<option value=\"" + item.id + "\">" + item.value + "</option>";
                        });
                        $("#edit-status").html(htmlStr);
                    }
                })
                $.ajax({
                    url: "settings/qx/user/getAllUserList.do",
                    type: "get",
                    success: function (data) {
                        //拼接字符串
                        let htmlStr = "<option value=''>-----请选择-----</option>";
                        $.each(data, function (index, item) {
                            htmlStr += "<option value=\"" + item.id + "\">" + item.name + "</option>";
                        });
                        $("#edit-clueOwner").html(htmlStr);
                    }
                })

                //发送ajax请求 获取数据
                $.ajax({
                    url: "workbench/clue/getEditCluePageInfo.do",
                    type: "get",
                    data: {
                        id: id
                    },
                    success: function (data) {
                        //将数据放到框中
                        $("#edit-id").val(data.id)
                        $("#edit-clueOwner").val(data.owner);
                        $("#edit-call").val(data.appellation);
                        $("#edit-surname").val(data.fullName);
                        $("#edit-company").val(data.company);
                        $("#edit-job").val(data.job);
                        $("#edit-email").val(data.email);
                        $("#edit-phone").val(data.phone);
                        $("#edit-website").val(data.website);
                        $("#edit-mphone").val(data.mphone);
                        $("#edit-status").val(data.state);
                        $("#edit-source").val(data.source);
                        $("#edit-describe").val(data.description);
                        $("#edit-contactSummary").val(data.contactSummary);
                        $("#edit-nextContactTime").val(data.nextContactTime);
                        $("#edit-address").val(data.address);
                    }
                })

                //打开模态窗口，加载数据
                $("#editClueModal").modal("show");


            });

            //更新按钮绑定单击事件按
            $("#clue-save-update").on("click", function () {
                //获取数据
                var id = $("#edit-id").val();
                var owner = $("#edit-clueOwner").val();
                var appellation = $("#edit-call").val();
                var fullName = $("#edit-surname").val();
                var company = $("#edit-company").val();
                var job = $("#edit-job").val();
                var email = $("#edit-email").val();
                var phone = $("#edit-phone").val();
                var website = $("#edit-website").val();
                var mphone = $("#edit-mphone").val();
                var state = $("#edit-status").val();
                var source = $("#edit-source").val();
                var description = $("#edit-describe").val();
                var contactSummary = $("#edit-contactSummary").val();
                var nextContactTime = $("#edit-nextContactTime").val();
                var address = $("#edit-address").val();

                //判断是否为空
                //判断必填数据是否为空
                if ('' === owner) {
                    alert("所有者不能为空!");
                    return;
                }
                if ('' === company) {
                    alert("公司不能为空!");
                    return;
                }
                if ('' === fullName) {
                    alert("姓名不能为空!");
                    return;
                }
                if ('' === state) {
                    alert("线索状态不能为空");
                    return;
                }
                if ('' === source) {
                    alert("线索来源不能为空");
                    return;
                }

                //发送ajax请求
                $.ajax({
                    url:"workbench/clue/saveEditCluePageInfo.do",
                    data:{
                        id:id,
                        owner: owner,
                        appellation: appellation,
                        fullName: fullName,
                        company: company,
                        job: job,
                        email: email,
                        phone: phone,
                        website: website,
                        mphone: mphone,
                        state: state,
                        source: source,
                        description: description,
                        contactSummary: contactSummary,
                        nextContactTime: nextContactTime,
                        address: address
                    },
                    type:"post",
                    success:function (data) {
                        if (data.code === 1){
                            alert("修改成功!");
                            //刷新数据
                            getClueForPageByCondition($("#page_demo").bs_pagination("getOption","currentPage"),$("#page_demo").bs_pagination("getOption","rowsPerPage"))
                            //关闭模态窗口
                            $("#editClueModal").modal("hide");
                        }
                        else{
                            alert(data.message);
                        }
                    }
                })
            });

            //给删除按钮绑定单击事件
            $("#clue-delete").on("click",function () {
                //获取已选的框
                let checkedList = $("#tBody input:checked");

                //判断是否多余一个
                if (checkedList.size() === 0){
                    alert("至少删除一个");
                    return;
                }

                //拼接字符串
                var ids = "";
                $.each(checkedList,function (index,data) {
                    ids+="id="+$.trim(data.value)+"&";
                });
                ids = ids.substring(0,ids.length-1);

                //发送ajax请求
                $.ajax({
                    url:"workbench/clue/deleteClue.do",
                    data:ids,
                    type:"post",
                    success:function (data) {
                        if (data.code === 1){
                            alert("删除成功!");
                            //刷新数据列表
                            getClueForPageByCondition(1,$("#page_demo").bs_pagination("getOption","rowsPerPage"));
                        }
                        else{
                            alert(data.message);
                        }
                    }
                })

            })




        });

        /**
         * 分页带条件查询线索
         * @param pageNo
         * @param pageSize
         */
        function getClueForPageByCondition(pageNo, pageSize) {
            //获取查询条件
            var company = $("#clue-company").val();
            var fullName = $("#clue-fullName").val();
            var mphone = $("#clue-mphone").val();
            var phone = $("#clue-phone").val();
            var source = $("#clue-source").val();
            var clueState = $("#clue-clueState").val();
            var owner = $("#clue-owner").val();

            //发送ajax请求 获取数据
            $.ajax({
                url: "workbench/clue/getClueForPageByCondition.do",
                data: {
                    company: company,
                    fullName: fullName,
                    mphone: mphone,
                    phone: phone,
                    source: source,
                    clueState: clueState,
                    owner: owner,
                    pageNo: pageNo,
                    pageSize: pageSize
                },
                type: "get",
                success: function (data) {
                    //拼接字符串
                    var htmlStr = "";
                    $.each(data.data, function (index, item) {
                        htmlStr += "<tr>";
                        htmlStr += "<td><input type=\"checkbox\" value=\"" + item.id + "\" /></td>";
                        htmlStr += "<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='workbench/clue/detailClue.do?id="+item.id+"';\">" + item.fullName + "</a></td>";
                        htmlStr += "<td>" + item.company + "</td>";
                        htmlStr += "<td>" + item.phone + "</td>";
                        htmlStr += "<td>" + item.mphone + "</td>";
                        htmlStr += "<td>" + item.source + "</td>";
                        htmlStr += "<td>" + item.owner + "</td>";
                        htmlStr += "<td>" + item.state + "</td>";
                        htmlStr += "</tr>";
                    })
                    //放到tBody中
                    $("#tBody").html(htmlStr);

                    //当成功查询到数据之后就加载分页
                    $("#page_demo").bs_pagination({
                        currentPage: pageNo,//当前页

                        rowsPerPage: pageSize,//每页显示条数
                        totalRows: data.total,//总条数
                        totalPages: data.pageTotal,//总页数

                        visiblePageLinks: 5,//显示的翻页卡片数

                        showGoToPage: true,//是否显示"跳转到第几页"
                        showRowsPerPage: true,//是否显示"每页显示条数"
                        showRowsInfo: true,//是否显示"记录的信息"

                        //每次切换页号都会自动触发此函数，函数能够返回切换之后的页号和每页显示条数
                        onChangePage: function (e2, pageObj) { // returns page_num and rows_per_page after a link has clicked
                            //清空选择框
                            // $("#chkedAll").prop("checked", false);
                            //查询
                            getClueForPageByCondition(pageObj.currentPage, pageObj.rowsPerPage);
                        }
                    });
                }
            })

        }

    </script>
</head>
<body>

<!-- 创建线索的模态窗口 -->
<div class="modal fade" id="createClueModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 90%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">创建线索</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" id="create-clue-form">

                    <div class="form-group">
                        <label for="create-clueOwner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-clueOwner">

                            </select>
                        </div>
                        <label for="create-company" class="col-sm-2 control-label">公司<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-company">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-appellation" class="col-sm-2 control-label">称呼</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-appellation">
                                <option></option>
                                <c:forEach items="${appellationList}" var="a">
                                    <option value="${a.id}">${a.value}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label for="create-fullName" class="col-sm-2 control-label">姓名<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-fullName">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-job" class="col-sm-2 control-label">职位</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-job">
                        </div>
                        <label for="create-email" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-email">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-phone" class="col-sm-2 control-label">公司座机</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-phone">
                        </div>
                        <label for="create-website" class="col-sm-2 control-label">公司网站</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-website">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-mphone" class="col-sm-2 control-label">手机</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-mphone">
                        </div>
                        <label for="create-state" class="col-sm-2 control-label">线索状态<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-state" id="create-state">
                                <option></option>
                                <c:forEach items="${clueStateList}" var="cs">
                                    <option value="${cs.id}">${cs.value}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-source" class="col-sm-2 control-label">线索来源<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-source">
                                <option></option>
                                <c:forEach items="${sourceList}" var="s">
                                    <option value="${s.id}">${s.value}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="create-description" class="col-sm-2 control-label">线索描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="create-description"></textarea>
                        </div>
                    </div>

                    <div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>

                    <div style="position: relative;top: 15px;">
                        <div class="form-group">
                            <label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
                            <div class="col-sm-10" style="width: 81%;">
                                <textarea class="form-control" rows="3" id="create-contactSummary"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-nextContactTime">
                            </div>
                        </div>
                    </div>

                    <div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>

                    <div style="position: relative;top: 20px;">
                        <div class="form-group">
                            <label for="create-address" class="col-sm-2 control-label">详细地址</label>
                            <div class="col-sm-10" style="width: 81%;">
                                <textarea class="form-control" rows="1" id="create-address"></textarea>
                            </div>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="saveCreateClueBtn" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改线索的模态窗口 -->
<div class="modal fade" id="editClueModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 90%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">修改线索</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <input type="text" class="form-control" id="edit-id" disabled>

                    <div class="form-group">
                        <label for="edit-clueOwner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="edit-clueOwner">

                            </select>
                        </div>
                        <label for="edit-company" class="col-sm-2 control-label">公司<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-company">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-call" class="col-sm-2 control-label">称呼</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="edit-call">

                            </select>
                        </div>
                        <label for="edit-surname" class="col-sm-2 control-label">姓名<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-surname">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-job" class="col-sm-2 control-label">职位</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-job">
                        </div>
                        <label for="edit-email" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-email">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-phone" class="col-sm-2 control-label">公司座机</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-phone">
                        </div>
                        <label for="edit-website" class="col-sm-2 control-label">公司网站</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-website"
                            >
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-mphone" class="col-sm-2 control-label">手机</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-mphone">
                        </div>
                        <label for="edit-status" class="col-sm-2 control-label">线索状态</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="edit-status">
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-source" class="col-sm-2 control-label">线索来源</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="edit-source">

                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-describe" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="edit-describe"></textarea>
                        </div>
                    </div>

                    <div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>

                    <div style="position: relative;top: 15px;">
                        <div class="form-group">
                            <label for="edit-contactSummary" class="col-sm-2 control-label">联系纪要</label>
                            <div class="col-sm-10" style="width: 81%;">
                                <textarea class="form-control" rows="3" id="edit-contactSummary"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="edit-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="edit-nextContactTime">
                            </div>
                        </div>
                    </div>

                    <div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>

                    <div style="position: relative;top: 20px;">
                        <div class="form-group">
                            <label for="edit-address" class="col-sm-2 control-label">详细地址</label>
                            <div class="col-sm-10" style="width: 81%;">
                                <textarea class="form-control" rows="1" id="edit-address"></textarea>
                            </div>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="clue-save-update">更新</button>
            </div>
        </div>
    </div>
</div>


<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>线索列表</h3>
        </div>
    </div>
</div>

<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">

    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">名称</div>
                        <input class="form-control" type="text" id="clue-fullName">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">公司</div>
                        <input class="form-control" type="text" id="clue-company">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">公司座机</div>
                        <input class="form-control" type="text" id="clue-phone">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">线索来源</div>
                        <select class="form-control" id="clue-source">

                        </select>
                    </div>
                </div>

                <br>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">所有者</div>
                        <input class="form-control" type="text" id="clue-owner">
                    </div>
                </div>


                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">手机</div>
                        <input class="form-control" type="text" id="clue-mphone">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">线索状态</div>
                        <select class="form-control" id="clue-clueState">

                        </select>
                    </div>
                </div>

                <button type="button" class="btn btn-default" id="clue-query">查询</button>
                <button type="button" class="btn btn-default" id="clue-reset">重置</button>

            </form>
        </div>
        <div class="btn-toolbar" role="toolbar"
             style="background-color: #F7F7F7; height: 50px; position: relative;top: 40px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <button type="button" class="btn btn-primary" data-target="#createClueModal" id="clue-create"><span
                        class="glyphicon glyphicon-plus"></span> 创建
                </button>
                <button type="button" class="btn btn-default" data-toggle="modal" id="clue-edit"><span
                        class="glyphicon glyphicon-pencil"></span> 修改
                </button>
                <button type="button" class="btn btn-danger" id="clue-delete"><span
                        class="glyphicon glyphicon-minus"></span> 删除
                </button>
            </div>


        </div>
        <div style="position: relative;top: 50px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><input type="checkbox" id="chkedAll"/></td>
                    <td>名称</td>
                    <td>公司</td>
                    <td>公司座机</td>
                    <td>手机</td>
                    <td>线索来源</td>
                    <td>所有者</td>
                    <td>线索状态</td>
                </tr>
                </thead>
                <div>
                    <tbody id="tBody">

                    </tbody>

                </div>
            </table>
            <div id="page_demo"></div>
        </div>

    </div>

</div>
</body>
</html>